<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <form-wizard color="#5664d2">
              <tab-content title="上传数据">
                <div class="text-center" style="line-height:200px;">
                  上传采集的企业名单
                </div>
              </tab-content>
              <tab-content title="检测过滤">
                <div class="text-center" style="padding:100px 0;">
                  <p>您上传了1000条数据，其中有2条数据包含特殊字符。</p>
                  <p>在上传文件的第202行和578行。</p>
                </div>
              </tab-content>
              <tab-content title="选择采集类型">
                <div class="form-group">
                  <label for="productname">采集任务名称</label>
                  <b-form-input
                    for="text"
                    v-model="basicContent.name"
                    placeholder="请输入采集任务名称"
                  ></b-form-input>
                </div>
                <div class="row">
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="price">采集类型</label>
                      <multiselect
                        v-model="collectionType"
                        :options="collectionOptions"
                        placeholder="请选择采集类型"
                      ></multiselect>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="price">采集渠道</label>
                      <multiselect
                        v-model="channel"
                        :options="channelOptions"
                        placeholder="请选择采集渠道"
                      ></multiselect>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="price">采集模板</label>
                      <multiselect
                        v-model="temp"
                        :options="tempOptions"
                        placeholder="请选择采集模板"
                      ></multiselect>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="productdesc">采集任务备注</label>
                  <textarea
                    v-model="basicContent.textarea"
                    class="form-control"
                    name="textarea"
                    rows="6"
                    placeholder="采集任务备注"
                  ></textarea>
                </div>
              </tab-content>
              <tab-content title="去掉重复">
                <div class="text-center" style="padding:100px 0;">
                  <p>您上传了1000条数据，其中有3条数据已在系统采集任务中存在。</p>
                  <p>在上传文件的第202行和578行可查阅，剩余x条可以点击查看更多详情。</p>
                </div>
              </tab-content>
              <tab-content title="开始采集！">
                <div class="text-center" style="line-height:200px;">
                  <b-button variant="primary">开始采集</b-button>
                </div>
              </tab-content>
            </form-wizard>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
import { FormWizard, TabContent } from "vue-form-wizard";
import Multiselect from "vue-multiselect";
export default {
  components: {
    Layout,
    PageHeaderNew,
    FormWizard,
    TabContent,
    Multiselect,
  },
  data () {
    return {
      items: [
        {
          text: "数据采集",
          url: "/spider",
        },{
          text: "批量导入工商数据",
          url: "",
        }
      ],
      basicContent: {
        name: "",
        textarea: "",
      },
      collectionOptions: ["基本信息", "变动信息", "关系图谱"],
      collectionType: "",
      channelOptions: ["天眼查", "爱企查", "企查查", "启信宝"],
      channel: "",
      tempOptions: ["模板一"],
      temp: "",
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
